<template>
  <div>
    <Vheader title="修改昵称"></Vheader>
    <div class="nick-wrapper">
      <input type="text" placeholder="请输入昵称" v-model="nick">
      <div class="nick-tips">昵称最长为11个字</div>
      <div class="save-btn" @click="updateNick">保存</div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vheader from '../../components/header'
  import axios from '../../axios/axios'
  export default{
    data() {
      return {
        nick: ''
      };
    },
    methods: {
      updateNick() {
        var that = this;
        var nick = JSON.stringify({
          'data': [{
            'nick': this.nick
          }],
          'controllerName': 'userInfo',
          'actionName': 'update'
        });
        axios.postAdmain({
          data:nick,
          callback(response){
            if (response.data.data.result === true) {
              var s = localStorage.getItem('user');
              s = JSON.parse(s);
              s.nick = that.nick;
              localStorage.setItem('user', JSON.stringify(s));
              that.$router.push('/userInfo');
              console.log(response.data);
            }
          }
        })
      }
    },
    components: {
      Vheader
    }
  };
</script>

<style type="text/scss" lang="scss">
  .nick-wrapper{
    width: 100%;
    margin-top: 44px;
    padding: 0 15px;
    box-sizing: border-box;
    input{
      width: 100%;
      height: 40px;
      margin-top: 20px;
      padding-left: 10px;
      border-bottom: solid 2px #f06a22;
      box-sizing: border-box;
      color: #919191;
    }
    .nick-tips{
      width: 100%;
      padding: 16px 10px;
      color: #919191;
      font-size: 12px;
      box-sizing: border-box;
    }
    .save-btn{
      width: 90%;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-radius: 5px;
      background: linear-gradient(to right ,#f06a22, #f04022);
      font-size: 15px;
      color: #FFFFFF;
      margin: 10px auto;
    }
  }
</style>
